<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 7 The Full Monty | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.20 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 7 The Full Monty | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="JohnCoene/javascript-for-r" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 7 The Full Monty | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2020-09-04" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="a-realistic-widget.html"/>
<link rel="next" href="advanced-topics.html"/>
<script src="libs/header-attrs/header-attrs.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<link href="libs/gitbook/css/style.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/accessible-code-block/empty-anchor.js"></script>
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/plotly-binding/plotly.js"></script>
<script src="libs/typedarray/typedarray.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main/plotly-latest.min.js"></script>
<script src="libs/core-js/shim.min.js"></script>
<script src="libs/react/react.min.js"></script>
<script src="libs/react/react-dom.min.js"></script>
<script src="libs/reactwidget/react-tools.js"></script>
<script src="libs/reactable-binding/reactable.js"></script>
<script src="libs/r2d3-render/r2d3-render.js"></script>
<script src="libs/webcomponents/webcomponents.js"></script>
<script src="libs/r2d3-binding/r2d3.js"></script>
<script src="libs/d3v5/d3.min.js"></script>
<script src="libs/viz/viz.js"></script>
<link href="libs/DiagrammeR-styles/styles.css" rel="stylesheet" />
<script src="libs/grViz-binding/grViz.js"></script>


<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/toc.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">JavaScript for R</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a>
<ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#premise"><i class="fa fa-check"></i>Premise</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#book-structure"><i class="fa fa-check"></i>Book Structure</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#acknowledgement"><i class="fa fa-check"></i>Acknowledgement</a></li>
</ul></li>
<li class="part"><span><b>I Basics &amp; Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="overview.html"><a href="overview.html"><i class="fa fa-check"></i><b>1</b> Overview</a>
<ul>
<li class="chapter" data-level="1.1" data-path="overview.html"><a href="overview.html#rationale"><i class="fa fa-check"></i><b>1.1</b> Rationale</a></li>
<li class="chapter" data-level="1.2" data-path="overview.html"><a href="overview.html#methods"><i class="fa fa-check"></i><b>1.2</b> Methods</a>
<ul>
<li class="chapter" data-level="1.2.1" data-path="overview.html"><a href="overview.html#v8"><i class="fa fa-check"></i><b>1.2.1</b> V8</a></li>
<li class="chapter" data-level="1.2.2" data-path="overview.html"><a href="overview.html#htmlwidgets"><i class="fa fa-check"></i><b>1.2.2</b> htmlwidgets</a></li>
<li class="chapter" data-level="1.2.3" data-path="overview.html"><a href="overview.html#shiny"><i class="fa fa-check"></i><b>1.2.3</b> Shiny</a></li>
<li class="chapter" data-level="1.2.4" data-path="overview.html"><a href="overview.html#bubble"><i class="fa fa-check"></i><b>1.2.4</b> bubble</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path="overview.html"><a href="overview.html#methods-amiss"><i class="fa fa-check"></i><b>1.3</b> Methods Amiss</a>
<ul>
<li class="chapter" data-level="1.3.1" data-path="overview.html"><a href="overview.html#reactr"><i class="fa fa-check"></i><b>1.3.1</b> reactR</a></li>
<li class="chapter" data-level="1.3.2" data-path="overview.html"><a href="overview.html#r2d3"><i class="fa fa-check"></i><b>1.3.2</b> r2d3</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="2" data-path="prerequisites.html"><a href="prerequisites.html"><i class="fa fa-check"></i><b>2</b> Prerequisites</a>
<ul>
<li class="chapter" data-level="2.1" data-path="prerequisites.html"><a href="prerequisites.html#r-package-development"><i class="fa fa-check"></i><b>2.1</b> R Package Development</a>
<ul>
<li class="chapter" data-level="2.1.1" data-path="prerequisites.html"><a href="prerequisites.html#creating-a-package"><i class="fa fa-check"></i><b>2.1.1</b> Creating a Package</a></li>
<li class="chapter" data-level="2.1.2" data-path="prerequisites.html"><a href="prerequisites.html#metadata"><i class="fa fa-check"></i><b>2.1.2</b> Metadata</a></li>
<li class="chapter" data-level="2.1.3" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>2.1.3</b> R code</a></li>
<li class="chapter" data-level="2.1.4" data-path="prerequisites.html"><a href="prerequisites.html#documentation"><i class="fa fa-check"></i><b>2.1.4</b> Documentation</a></li>
<li class="chapter" data-level="2.1.5" data-path="prerequisites.html"><a href="prerequisites.html#installed-files"><i class="fa fa-check"></i><b>2.1.5</b> Installed files</a></li>
<li class="chapter" data-level="2.1.6" data-path="prerequisites.html"><a href="prerequisites.html#build-load-and-install"><i class="fa fa-check"></i><b>2.1.6</b> Build, load, and install</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="prerequisites.html"><a href="prerequisites.html#json"><i class="fa fa-check"></i><b>2.2</b> JSON</a>
<ul>
<li class="chapter" data-level="2.2.1" data-path="prerequisites.html"><a href="prerequisites.html#serialising"><i class="fa fa-check"></i><b>2.2.1</b> Serialising</a></li>
<li class="chapter" data-level="2.2.2" data-path="prerequisites.html"><a href="prerequisites.html#tabular-data"><i class="fa fa-check"></i><b>2.2.2</b> Tabular data</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>2.3</b> JavaScript</a>
<ul>
<li class="chapter" data-level="2.3.1" data-path="prerequisites.html"><a href="prerequisites.html#developer-tools"><i class="fa fa-check"></i><b>2.3.1</b> Developer tools</a></li>
<li class="chapter" data-level="2.3.2" data-path="prerequisites.html"><a href="prerequisites.html#variable-declaration-and-scope"><i class="fa fa-check"></i><b>2.3.2</b> Variable declaration and scope</a></li>
<li class="chapter" data-level="2.3.3" data-path="prerequisites.html"><a href="prerequisites.html#document-object-model"><i class="fa fa-check"></i><b>2.3.3</b> Document object model</a></li>
</ul></li>
<li class="chapter" data-level="2.4" data-path="overview.html"><a href="overview.html#shiny"><i class="fa fa-check"></i><b>2.4</b> Shiny</a>
<ul>
<li class="chapter" data-level="2.4.1" data-path="prerequisites.html"><a href="prerequisites.html#htmltools"><i class="fa fa-check"></i><b>2.4.1</b> Htmltools</a></li>
<li class="chapter" data-level="2.4.2" data-path="prerequisites.html"><a href="prerequisites.html#static-files"><i class="fa fa-check"></i><b>2.4.2</b> Static files</a></li>
<li class="chapter" data-level="2.4.3" data-path="prerequisites.html"><a href="prerequisites.html#dependencies-pros-and-cons"><i class="fa fa-check"></i><b>2.4.3</b> Dependencies Pros and Cons</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II Data Visualisation</b></span></li>
<li class="chapter" data-level="3" data-path="introduction-to-widgets.html"><a href="introduction-to-widgets.html"><i class="fa fa-check"></i><b>3</b> Introduction to Widgets</a>
<ul>
<li class="chapter" data-level="3.1" data-path="introduction-to-widgets.html"><a href="introduction-to-widgets.html#plotly-package"><i class="fa fa-check"></i><b>3.1</b> Plotly package</a></li>
<li class="chapter" data-level="3.2" data-path="introduction-to-widgets.html"><a href="introduction-to-widgets.html#dt-package"><i class="fa fa-check"></i><b>3.2</b> DT package</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html"><i class="fa fa-check"></i><b>4</b> Basics of Building Widgets</a>
<ul>
<li class="chapter" data-level="4.1" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#candidate-libraries"><i class="fa fa-check"></i><b>4.1</b> Candidate Libraries</a>
<ul>
<li class="chapter" data-level="4.1.1" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#plotly.js"><i class="fa fa-check"></i><b>4.1.1</b> Plotly.js</a></li>
<li class="chapter" data-level="4.1.2" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#highchart.js"><i class="fa fa-check"></i><b>4.1.2</b> Highchart.js</a></li>
<li class="chapter" data-level="4.1.3" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#chart.js"><i class="fa fa-check"></i><b>4.1.3</b> Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="4.2" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#how-it-works"><i class="fa fa-check"></i><b>4.2</b> How it works</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="your-first-widget.html"><a href="your-first-widget.html"><i class="fa fa-check"></i><b>5</b> Your First Widget</a>
<ul>
<li class="chapter" data-level="5.1" data-path="your-first-widget.html"><a href="your-first-widget.html#the-htmlwidgets-scaffold"><i class="fa fa-check"></i><b>5.1</b> The Htmlwidgets Scaffold</a></li>
<li class="chapter" data-level="5.2" data-path="your-first-widget.html"><a href="your-first-widget.html#the-html-output"><i class="fa fa-check"></i><b>5.2</b> The HTML Output</a></li>
<li class="chapter" data-level="5.3" data-path="your-first-widget.html"><a href="your-first-widget.html#htmlwidgets-javascript-files"><i class="fa fa-check"></i><b>5.3</b> Htmlwidgets JavaScript Files</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html"><i class="fa fa-check"></i><b>6</b> A Realistic Widget</a>
<ul>
<li class="chapter" data-level="6.1" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#peity.js-dependencies"><i class="fa fa-check"></i><b>6.1</b> Peity.js Dependencies</a></li>
<li class="chapter" data-level="6.2" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#peity.js-implementation"><i class="fa fa-check"></i><b>6.2</b> Peity.js Implementation</a></li>
<li class="chapter" data-level="6.3" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#peity.js-html-element"><i class="fa fa-check"></i><b>6.3</b> Peity.js HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="the-full-monty.html"><a href="the-full-monty.html"><i class="fa fa-check"></i><b>7</b> The Full Monty</a>
<ul>
<li class="chapter" data-level="7.1" data-path="the-full-monty.html"><a href="the-full-monty.html#gio.js-dependencies"><i class="fa fa-check"></i><b>7.1</b> Gio.js Dependencies</a></li>
<li class="chapter" data-level="7.2" data-path="the-full-monty.html"><a href="the-full-monty.html#gio.js-javascript"><i class="fa fa-check"></i><b>7.2</b> Gio.js JavaScript</a></li>
<li class="chapter" data-level="7.3" data-path="the-full-monty.html"><a href="the-full-monty.html#working-with-data"><i class="fa fa-check"></i><b>7.3</b> Working with Data</a></li>
<li class="chapter" data-level="7.4" data-path="the-full-monty.html"><a href="the-full-monty.html#transforming-data"><i class="fa fa-check"></i><b>7.4</b> Transforming Data</a>
<ul>
<li class="chapter" data-level="7.4.1" data-path="the-full-monty.html"><a href="the-full-monty.html#using-javascript"><i class="fa fa-check"></i><b>7.4.1</b> Using JavaScript</a></li>
<li class="chapter" data-level="7.4.2" data-path="the-full-monty.html"><a href="the-full-monty.html#using-r"><i class="fa fa-check"></i><b>7.4.2</b> Using R</a></li>
<li class="chapter" data-level="7.4.3" data-path="the-full-monty.html"><a href="the-full-monty.html#pros-cons"><i class="fa fa-check"></i><b>7.4.3</b> Pros &amp; Cons</a></li>
</ul></li>
<li class="chapter" data-level="7.5" data-path="the-full-monty.html"><a href="the-full-monty.html#on-print-method"><i class="fa fa-check"></i><b>7.5</b> On Print Method</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="advanced-topics.html"><a href="advanced-topics.html"><i class="fa fa-check"></i><b>8</b> Advanced Topics</a>
<ul>
<li class="chapter" data-level="8.1" data-path="advanced-topics.html"><a href="advanced-topics.html#shared-variables"><i class="fa fa-check"></i><b>8.1</b> Shared Variables</a>
<ul>
<li class="chapter" data-level="8.1.1" data-path="advanced-topics.html"><a href="advanced-topics.html#sizing"><i class="fa fa-check"></i><b>8.1.1</b> Sizing</a></li>
<li class="chapter" data-level="8.1.2" data-path="advanced-topics.html"><a href="advanced-topics.html#sizing-policy"><i class="fa fa-check"></i><b>8.1.2</b> Sizing Policy</a></li>
</ul></li>
<li class="chapter" data-level="8.2" data-path="advanced-topics.html"><a href="advanced-topics.html#resizing"><i class="fa fa-check"></i><b>8.2</b> Resizing</a></li>
<li class="chapter" data-level="8.3" data-path="advanced-topics.html"><a href="advanced-topics.html#pre-render-hooks-security"><i class="fa fa-check"></i><b>8.3</b> Pre Render Hooks &amp; Security</a></li>
<li class="chapter" data-level="8.4" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>8.4</b> JavaScript Code</a></li>
<li class="chapter" data-level="8.5" data-path="advanced-topics.html"><a href="advanced-topics.html#prepend-append-content"><i class="fa fa-check"></i><b>8.5</b> Prepend &amp; Append Content</a></li>
<li class="chapter" data-level="8.6" data-path="advanced-topics.html"><a href="advanced-topics.html#dependencies"><i class="fa fa-check"></i><b>8.6</b> Dependencies</a></li>
<li class="chapter" data-level="8.7" data-path="advanced-topics.html"><a href="advanced-topics.html#compatibility"><i class="fa fa-check"></i><b>8.7</b> Compatibility</a></li>
<li class="chapter" data-level="8.8" data-path="advanced-topics.html"><a href="advanced-topics.html#unit-tests"><i class="fa fa-check"></i><b>8.8</b> Unit Tests</a></li>
<li class="chapter" data-level="8.9" data-path="advanced-topics.html"><a href="advanced-topics.html#performances"><i class="fa fa-check"></i><b>8.9</b> Performances</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="linking-widgets.html"><a href="linking-widgets.html"><i class="fa fa-check"></i><b>9</b> Linking Widgets</a>
<ul>
<li class="chapter" data-level="9.1" data-path="linking-widgets.html"><a href="linking-widgets.html#crosstalk-examples"><i class="fa fa-check"></i><b>9.1</b> Crosstalk examples</a></li>
<li class="chapter" data-level="9.2" data-path="linking-widgets.html"><a href="linking-widgets.html#crosstalk-requirements"><i class="fa fa-check"></i><b>9.2</b> Crosstalk requirements</a></li>
<li class="chapter" data-level="9.3" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#how-it-works"><i class="fa fa-check"></i><b>9.3</b> How it works</a></li>
<li class="chapter" data-level="9.4" data-path="linking-widgets.html"><a href="linking-widgets.html#crosstalk-with-gio"><i class="fa fa-check"></i><b>9.4</b> Crosstalk with gio</a></li>
<li class="chapter" data-level="9.5" data-path="linking-widgets.html"><a href="linking-widgets.html#adapt-the-r-code"><i class="fa fa-check"></i><b>9.5</b> Adapt the R code</a></li>
<li class="chapter" data-level="9.6" data-path="linking-widgets.html"><a href="linking-widgets.html#change-the-javascript-code"><i class="fa fa-check"></i><b>9.6</b> Change the JavaScript code</a>
<ul>
<li class="chapter" data-level="9.6.1" data-path="linking-widgets.html"><a href="linking-widgets.html#send-selected-keys"><i class="fa fa-check"></i><b>9.6.1</b> Send selected keys</a></li>
<li class="chapter" data-level="9.6.2" data-path="linking-widgets.html"><a href="linking-widgets.html#set-selected-keys"><i class="fa fa-check"></i><b>9.6.2</b> Set selected keys</a></li>
<li class="chapter" data-level="9.6.3" data-path="linking-widgets.html"><a href="linking-widgets.html#recap-javascript-code"><i class="fa fa-check"></i><b>9.6.3</b> Recap JavaScript code</a></li>
</ul></li>
<li class="chapter" data-level="9.7" data-path="linking-widgets.html"><a href="linking-widgets.html#using-crosstalk-with-gio"><i class="fa fa-check"></i><b>9.7</b> Using crosstalk with gio</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="final-revisions.html"><a href="final-revisions.html"><i class="fa fa-check"></i><b>10</b> Final Revisions</a>
<ul>
<li class="chapter" data-level="10.1" data-path="final-revisions.html"><a href="final-revisions.html#htmlwidgets-data"><i class="fa fa-check"></i><b>10.1</b> Htmlwidgets &amp; Data</a></li>
<li class="chapter" data-level="10.2" data-path="final-revisions.html"><a href="final-revisions.html#plethora-of-options"><i class="fa fa-check"></i><b>10.2</b> Plethora of Options</a></li>
<li class="chapter" data-level="10.3" data-path="final-revisions.html"><a href="final-revisions.html#interface-design"><i class="fa fa-check"></i><b>10.3</b> Interface Design</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="excercise-ploty.html"><a href="excercise-ploty.html"><i class="fa fa-check"></i><b>11</b> Excercise - Ploty</a>
<ul>
<li class="chapter" data-level="11.1" data-path="excercise-ploty.html"><a href="excercise-ploty.html#discover-plotly"><i class="fa fa-check"></i><b>11.1</b> Discover Plotly</a></li>
<li class="chapter" data-level="11.2" data-path="excercise-ploty.html"><a href="excercise-ploty.html#basics-of-plotly"><i class="fa fa-check"></i><b>11.2</b> Basics of Plotly</a></li>
<li class="chapter" data-level="11.3" data-path="excercise-ploty.html"><a href="excercise-ploty.html#plotly.js-to-r"><i class="fa fa-check"></i><b>11.3</b> Plotly.js to R</a></li>
<li class="chapter" data-level="11.4" data-path="excercise-ploty.html"><a href="excercise-ploty.html#r-to-plotly.js"><i class="fa fa-check"></i><b>11.4</b> R to Plotly.js</a></li>
<li class="chapter" data-level="11.5" data-path="excercise-ploty.html"><a href="excercise-ploty.html#size-resize-plotly.js"><i class="fa fa-check"></i><b>11.5</b> Size &amp; Resize Plotly.js</a></li>
<li class="chapter" data-level="11.6" data-path="excercise-ploty.html"><a href="excercise-ploty.html#performance-security-with-plotly.js"><i class="fa fa-check"></i><b>11.6</b> Performance &amp; Security with Plotly.js</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="12" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html"><i class="fa fa-check"></i><b>12</b> Introduction to Shiny</a>
<ul>
<li class="chapter" data-level="12.1" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#websocket-shiny"><i class="fa fa-check"></i><b>12.1</b> Websocket &amp; Shiny</a></li>
<li class="chapter" data-level="12.2" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-an-example"><i class="fa fa-check"></i><b>12.2</b> Alerts, An Example</a></li>
<li class="chapter" data-level="12.3" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-r-to-js"><i class="fa fa-check"></i><b>12.3</b> From R to JavaScript</a></li>
<li class="chapter" data-level="12.4" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-js-to-r"><i class="fa fa-check"></i><b>12.4</b> From JavaScript to R</a></li>
<li class="chapter" data-level="12.5" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-deserialise"><i class="fa fa-check"></i><b>12.5</b> Deserialise</a></li>
</ul></li>
<li class="chapter" data-level="13" data-path="a-complete-integration.html"><a href="a-complete-integration.html"><i class="fa fa-check"></i><b>13</b> A Complete Integration</a>
<ul>
<li class="chapter" data-level="13.1" data-path="a-complete-integration.html"><a href="a-complete-integration.html#serialisation"><i class="fa fa-check"></i><b>13.1</b> Serialisation</a></li>
<li class="chapter" data-level="13.2" data-path="a-complete-integration.html"><a href="a-complete-integration.html#events-callbacks"><i class="fa fa-check"></i><b>13.2</b> Events &amp; Callbacks</a></li>
<li class="chapter" data-level="13.3" data-path="a-complete-integration.html"><a href="a-complete-integration.html#as-a-package"><i class="fa fa-check"></i><b>13.3</b> As a Package</a>
<ul>
<li class="chapter" data-level="13.3.1" data-path="advanced-topics.html"><a href="advanced-topics.html#dependencies"><i class="fa fa-check"></i><b>13.3.1</b> Dependencies</a></li>
<li class="chapter" data-level="13.3.2" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>13.3.2</b> R Code</a></li>
<li class="chapter" data-level="13.3.3" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>13.3.3</b> JavaScript Code</a></li>
<li class="chapter" data-level="13.3.4" data-path="a-complete-integration.html"><a href="a-complete-integration.html#input-handler"><i class="fa fa-check"></i><b>13.3.4</b> Input Handler</a></li>
<li class="chapter" data-level="13.3.5" data-path="a-complete-integration.html"><a href="a-complete-integration.html#wrapping-up"><i class="fa fa-check"></i><b>13.3.5</b> Wrapping up</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="14" data-path="tips-tricks.html"><a href="tips-tricks.html"><i class="fa fa-check"></i><b>14</b> Tips &amp; Tricks</a>
<ul>
<li class="chapter" data-level="14.1" data-path="tips-tricks.html"><a href="tips-tricks.html#shiny-events"><i class="fa fa-check"></i><b>14.1</b> Shiny Events</a></li>
<li class="chapter" data-level="14.2" data-path="tips-tricks.html"><a href="tips-tricks.html#table-buttons"><i class="fa fa-check"></i><b>14.2</b> Table Buttons</a></li>
<li class="chapter" data-level="14.3" data-path="tips-tricks.html"><a href="tips-tricks.html#jquery---toggle"><i class="fa fa-check"></i><b>14.3</b> jQuery - Toggle</a></li>
</ul></li>
<li class="chapter" data-level="15" data-path="custom-outputs.html"><a href="custom-outputs.html"><i class="fa fa-check"></i><b>15</b> Custom Outputs</a>
<ul>
<li class="chapter" data-level="15.1" data-path="custom-outputs.html"><a href="custom-outputs.html#custom-outputs-inner-workings"><i class="fa fa-check"></i><b>15.1</b> Custom Outputs Inner-workings</a></li>
<li class="chapter" data-level="15.2" data-path="custom-outputs.html"><a href="custom-outputs.html#setup-custom-output"><i class="fa fa-check"></i><b>15.2</b> Setup Custom Output</a></li>
<li class="chapter" data-level="15.3" data-path="custom-outputs.html"><a href="custom-outputs.html#output-r-function"><i class="fa fa-check"></i><b>15.3</b> Output R Function</a></li>
<li class="chapter" data-level="15.4" data-path="custom-outputs.html"><a href="custom-outputs.html#generate-output-html"><i class="fa fa-check"></i><b>15.4</b> Generate Output HTML</a></li>
<li class="chapter" data-level="15.5" data-path="custom-outputs.html"><a href="custom-outputs.html#output-renderer"><i class="fa fa-check"></i><b>15.5</b> Output Renderer</a></li>
<li class="chapter" data-level="15.6" data-path="custom-outputs.html"><a href="custom-outputs.html#javascript-output-binding"><i class="fa fa-check"></i><b>15.6</b> JavaScript Output Binding</a>
<ul>
<li class="chapter" data-level="15.6.1" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-title"><i class="fa fa-check"></i><b>15.6.1</b> Boxxy title</a></li>
<li class="chapter" data-level="15.6.2" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-value"><i class="fa fa-check"></i><b>15.6.2</b> Boxxy value</a></li>
<li class="chapter" data-level="15.6.3" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-background-color"><i class="fa fa-check"></i><b>15.6.3</b> Boxxy Background Color</a></li>
<li class="chapter" data-level="15.6.4" data-path="custom-outputs.html"><a href="custom-outputs.html#register-the-output-binding"><i class="fa fa-check"></i><b>15.6.4</b> Register the Output Binding</a></li>
</ul></li>
<li class="chapter" data-level="15.7" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-usage"><i class="fa fa-check"></i><b>15.7</b> Boxxy Usage</a></li>
<li class="chapter" data-level="15.8" data-path="custom-outputs.html"><a href="custom-outputs.html#injecting-dependencies"><i class="fa fa-check"></i><b>15.8</b> Injecting Dependencies</a></li>
<li class="chapter" data-level="15.9" data-path="custom-outputs.html"><a href="custom-outputs.html#preprocessing-custom-outputs"><i class="fa fa-check"></i><b>15.9</b> Preprocessing Custom Outputs</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="custom-inputs.html"><a href="custom-inputs.html"><i class="fa fa-check"></i><b>16</b> Custom Inputs</a>
<ul>
<li class="chapter" data-level="16.1" data-path="custom-inputs.html"><a href="custom-inputs.html#setup-custom-input"><i class="fa fa-check"></i><b>16.1</b> Setup Custom Input</a></li>
<li class="chapter" data-level="16.2" data-path="custom-inputs.html"><a href="custom-inputs.html#switch-input-html-style"><i class="fa fa-check"></i><b>16.2</b> Switch Input HTML &amp; Style</a></li>
<li class="chapter" data-level="16.3" data-path="custom-inputs.html"><a href="custom-inputs.html#generate-input-html"><i class="fa fa-check"></i><b>16.3</b> Generate Input HTML</a></li>
<li class="chapter" data-level="16.4" data-path="custom-inputs.html"><a href="custom-inputs.html#javascript-input-binding"><i class="fa fa-check"></i><b>16.4</b> JavaScript Input Binding</a>
<ul>
<li class="chapter" data-level="16.4.1" data-path="custom-inputs.html"><a href="custom-inputs.html#find-inputs"><i class="fa fa-check"></i><b>16.4.1</b> Find Inputs</a></li>
<li class="chapter" data-level="16.4.2" data-path="custom-inputs.html"><a href="custom-inputs.html#get-input-id"><i class="fa fa-check"></i><b>16.4.2</b> Get Input Id</a></li>
<li class="chapter" data-level="16.4.3" data-path="custom-inputs.html"><a href="custom-inputs.html#get-input-value"><i class="fa fa-check"></i><b>16.4.3</b> Get Input Value</a></li>
<li class="chapter" data-level="16.4.4" data-path="custom-inputs.html"><a href="custom-inputs.html#set-input-value"><i class="fa fa-check"></i><b>16.4.4</b> Set Input Value</a></li>
<li class="chapter" data-level="16.4.5" data-path="custom-inputs.html"><a href="custom-inputs.html#receive-input-messages"><i class="fa fa-check"></i><b>16.4.5</b> Receive Input Messages</a></li>
<li class="chapter" data-level="16.4.6" data-path="custom-inputs.html"><a href="custom-inputs.html#subscribe-unsubscribe-inputs"><i class="fa fa-check"></i><b>16.4.6</b> Subscribe &amp; Unsubscribe Inputs</a></li>
<li class="chapter" data-level="16.4.7" data-path="custom-inputs.html"><a href="custom-inputs.html#input-rate-policy"><i class="fa fa-check"></i><b>16.4.7</b> Input Rate Policy</a></li>
<li class="chapter" data-level="16.4.8" data-path="custom-inputs.html"><a href="custom-inputs.html#registering-the-input"><i class="fa fa-check"></i><b>16.4.8</b> Registering the Input</a></li>
</ul></li>
<li class="chapter" data-level="16.5" data-path="custom-inputs.html"><a href="custom-inputs.html#update-input"><i class="fa fa-check"></i><b>16.5</b> Update Input</a></li>
<li class="chapter" data-level="16.6" data-path="custom-inputs.html"><a href="custom-inputs.html#exercise"><i class="fa fa-check"></i><b>16.6</b> Exercise</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="cookies.html"><a href="cookies.html"><i class="fa fa-check"></i><b>17</b> Cookies</a>
<ul>
<li class="chapter" data-level="17.1" data-path="cookies.html"><a href="cookies.html#discover-js-cookie"><i class="fa fa-check"></i><b>17.1</b> Discover js-cookie</a></li>
<li class="chapter" data-level="17.2" data-path="cookies.html"><a href="cookies.html#setup-cookies-project"><i class="fa fa-check"></i><b>17.2</b> Setup Cookies Project</a></li>
<li class="chapter" data-level="17.3" data-path="cookies.html"><a href="cookies.html#javascript-cookies"><i class="fa fa-check"></i><b>17.3</b> JavaScript Cookies</a></li>
<li class="chapter" data-level="17.4" data-path="cookies.html"><a href="cookies.html#r-code-for-cookies"><i class="fa fa-check"></i><b>17.4</b> R Code for Cookies</a></li>
</ul></li>
<li class="chapter" data-level="18" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html"><i class="fa fa-check"></i><b>18</b> Widgets with Shiny</a>
<ul>
<li class="chapter" data-level="18.1" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#widgets-to-r"><i class="fa fa-check"></i><b>18.1</b> Widgets to R</a></li>
<li class="chapter" data-level="18.2" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#input-handlers-for-widgets"><i class="fa fa-check"></i><b>18.2</b> Input Handlers for Widgets</a></li>
<li class="chapter" data-level="18.3" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#r-to-widgets"><i class="fa fa-check"></i><b>18.3</b> R to Widgets</a>
<ul>
<li class="chapter" data-level="18.3.1" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#send-data-from-widgets"><i class="fa fa-check"></i><b>18.3.1</b> Send Data from Widgets</a></li>
<li class="chapter" data-level="18.3.2" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#retrieve-widget-instance"><i class="fa fa-check"></i><b>18.3.2</b> Retrieve Widget Instance</a></li>
<li class="chapter" data-level="18.3.3" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#handle-data"><i class="fa fa-check"></i><b>18.3.3</b> Handle Data</a></li>
</ul></li>
<li class="chapter" data-level="18.4" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#proxy-function"><i class="fa fa-check"></i><b>18.4</b> Proxy Function</a></li>
<li class="chapter" data-level="18.5" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#clear-data"><i class="fa fa-check"></i><b>18.5</b> Clear Data</a></li>
<li class="chapter" data-level="18.6" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#update-the-widget"><i class="fa fa-check"></i><b>18.6</b> Update the Widget</a></li>
</ul></li>
<li class="part"><span><b>IV Interactive Documents</b></span></li>
<li class="chapter" data-level="19" data-path="introduction-to-rmarkdown.html"><a href="introduction-to-rmarkdown.html"><i class="fa fa-check"></i><b>19</b> Introduction to Rmarkdown</a></li>
<li class="part"><span><b>V JavaScript for Computations</b></span></li>
<li class="chapter" data-level="20" data-path="the-v8-engine.html"><a href="the-v8-engine.html"><i class="fa fa-check"></i><b>20</b> The V8 Engine</a>
<ul>
<li class="chapter" data-level="20.1" data-path="the-v8-engine.html"><a href="the-v8-engine.html#installation"><i class="fa fa-check"></i><b>20.1</b> Installation</a></li>
<li class="chapter" data-level="20.2" data-path="the-v8-engine.html"><a href="the-v8-engine.html#basics"><i class="fa fa-check"></i><b>20.2</b> Basics</a></li>
<li class="chapter" data-level="20.3" data-path="the-v8-engine.html"><a href="the-v8-engine.html#external-libraries"><i class="fa fa-check"></i><b>20.3</b> External Libraries</a></li>
<li class="chapter" data-level="20.4" data-path="the-v8-engine.html"><a href="the-v8-engine.html#with-npm"><i class="fa fa-check"></i><b>20.4</b> With Npm</a></li>
<li class="chapter" data-level="20.5" data-path="the-v8-engine.html"><a href="the-v8-engine.html#use-in-packages"><i class="fa fa-check"></i><b>20.5</b> Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="exercise-machine-learning.html"><a href="exercise-machine-learning.html"><i class="fa fa-check"></i><b>21</b> Exercise - Machine Learning</a>
<ul>
<li class="chapter" data-level="21.1" data-path="exercise-machine-learning.html"><a href="exercise-machine-learning.html#dependency"><i class="fa fa-check"></i><b>21.1</b> Dependency</a></li>
<li class="chapter" data-level="21.2" data-path="exercise-machine-learning.html"><a href="exercise-machine-learning.html#simple-regression"><i class="fa fa-check"></i><b>21.2</b> Simple Regression</a></li>
</ul></li>
<li class="part"><span><b>VI Examples</b></span></li>
<li class="chapter" data-level="22" data-path="image-classifier.html"><a href="image-classifier.html"><i class="fa fa-check"></i><b>22</b> Image Classifier</a>
<ul>
<li class="chapter" data-level="22.1" data-path="image-classifier.html"><a href="image-classifier.html#discover"><i class="fa fa-check"></i><b>22.1</b> Discover</a></li>
<li class="chapter" data-level="22.2" data-path="image-classifier.html"><a href="image-classifier.html#setup"><i class="fa fa-check"></i><b>22.2</b> Setup</a></li>
<li class="chapter" data-level="22.3" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>22.3</b> JavaScript</a></li>
<li class="chapter" data-level="22.4" data-path="a-complete-integration.html"><a href="a-complete-integration.html#input-handler"><i class="fa fa-check"></i><b>22.4</b> Input Handler</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="progress-bar.html"><a href="progress-bar.html"><i class="fa fa-check"></i><b>23</b> Progress Bar</a>
<ul>
<li class="chapter" data-level="23.1" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>23.1</b> R code</a></li>
<li class="chapter" data-level="23.2" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>23.2</b> JavaScript code</a></li>
<li class="chapter" data-level="23.3" data-path="progress-bar.html"><a href="progress-bar.html#events"><i class="fa fa-check"></i><b>23.3</b> Events</a></li>
</ul></li>
<li class="part"><span><b>VII Closing Remarks</b></span></li>
<li class="chapter" data-level="24" data-path="conclusion.html"><a href="conclusion.html"><i class="fa fa-check"></i><b>24</b> Conclusion</a>
<ul>
<li class="chapter" data-level="24.1" data-path="advanced-topics.html"><a href="advanced-topics.html#performances"><i class="fa fa-check"></i><b>24.1</b> Performances</a></li>
<li class="chapter" data-level="24.2" data-path="conclusion.html"><a href="conclusion.html#road-ahead"><i class="fa fa-check"></i><b>24.2</b> Road ahead</a>
<ul>
<li class="chapter" data-level="24.2.1" data-path="conclusion.html"><a href="conclusion.html#computation"><i class="fa fa-check"></i><b>24.2.1</b> Computation</a></li>
<li class="chapter" data-level="24.2.2" data-path="overview.html"><a href="overview.html#shiny"><i class="fa fa-check"></i><b>24.2.2</b> Shiny</a></li>
<li class="chapter" data-level="24.2.3" data-path="overview.html"><a href="overview.html#htmlwidgets"><i class="fa fa-check"></i><b>24.2.3</b> htmlwidgets</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="the-full-monty" class="section level1" number="7">
<h1><span class="header-section-number">Chapter 7</span> The Full Monty</h1>
<p>With a first widget built one can jump onto another one: <a href="https://giojs.org/">gio.js</a>, a library to draw arcs between countries on a 3 dimensional globe. This will include many more functionalities such packages can comprise.</p>
<p>Then again, the first order of business when looking to integrate a library is to look at the documentation to understand what should be reproduced in R.</p>
<div class="sourceCode" id="cb127"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb127-1"><a href="the-full-monty.html#cb127-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb127-2"><a href="the-full-monty.html#cb127-2"></a><span class="kw">&lt;html</span><span class="ot"> xmlns=</span><span class="st">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="ot"> lang=</span><span class="st">&quot;&quot;</span><span class="ot"> xml:lang=</span><span class="st">&quot;&quot;</span><span class="kw">&gt;</span></span>
<span id="cb127-3"><a href="the-full-monty.html#cb127-3"></a></span>
<span id="cb127-4"><a href="the-full-monty.html#cb127-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb127-5"><a href="the-full-monty.html#cb127-5"></a>  <span class="co">&lt;!-- Import libraries --&gt;</span></span>
<span id="cb127-6"><a href="the-full-monty.html#cb127-6"></a>  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;three.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb127-7"><a href="the-full-monty.html#cb127-7"></a>  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;gio.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb127-8"><a href="the-full-monty.html#cb127-8"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb127-9"><a href="the-full-monty.html#cb127-9"></a></span>
<span id="cb127-10"><a href="the-full-monty.html#cb127-10"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb127-11"><a href="the-full-monty.html#cb127-11"></a>  <span class="co">&lt;!-- div to hold visualisation --&gt;</span></span>
<span id="cb127-12"><a href="the-full-monty.html#cb127-12"></a>  <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;globe&quot;</span><span class="ot"> style=</span><span class="st">&quot;width: 200px; height: 200px&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></span>
<span id="cb127-13"><a href="the-full-monty.html#cb127-13"></a></span>
<span id="cb127-14"><a href="the-full-monty.html#cb127-14"></a>  <span class="co">&lt;!-- Script to create visualisation --&gt;</span></span>
<span id="cb127-15"><a href="the-full-monty.html#cb127-15"></a>  <span class="kw">&lt;script&gt;</span></span>
<span id="cb127-16"><a href="the-full-monty.html#cb127-16"></a>    <span class="kw">var</span> container <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(<span class="st">&quot;globe&quot;</span>)<span class="op">;</span></span>
<span id="cb127-17"><a href="the-full-monty.html#cb127-17"></a>    <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> GIO<span class="op">.</span><span class="fu">Controller</span>(container)<span class="op">;</span></span>
<span id="cb127-18"><a href="the-full-monty.html#cb127-18"></a>    controller<span class="op">.</span><span class="fu">addData</span>(data)<span class="op">;</span></span>
<span id="cb127-19"><a href="the-full-monty.html#cb127-19"></a>    controller<span class="op">.</span><span class="fu">init</span>()<span class="op">;</span></span>
<span id="cb127-20"><a href="the-full-monty.html#cb127-20"></a>  <span class="kw">&lt;/script&gt;</span></span>
<span id="cb127-21"><a href="the-full-monty.html#cb127-21"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb127-22"><a href="the-full-monty.html#cb127-22"></a></span>
<span id="cb127-23"><a href="the-full-monty.html#cb127-23"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<div class="figure">
<img src="images/gio-example.png" alt="" />
<p class="caption">Example of Gio.js visualisation</p>
</div>
<p>Gio.js has itself a dependency, <a href="https://threejs.org/">three.js</a>, which needs to be imported before gio.js, other than that not much differs from libraries previously explored in this chapter.</p>
<div class="sourceCode" id="cb128"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb128-1"><a href="the-full-monty.html#cb128-1"></a>usethis<span class="op">::</span><span class="kw">create_package</span>(<span class="st">&quot;gio&quot;</span>)</span>
<span id="cb128-2"><a href="the-full-monty.html#cb128-2"></a>htmlwidgets<span class="op">::</span><span class="kw">scaffoldWidget</span>(<span class="st">&quot;gio&quot;</span>)</span></code></pre></div>
<div id="gio.js-dependencies" class="section level2" number="7.1">
<h2><span class="header-section-number">7.1</span> Gio.js Dependencies</h2>
<p>Handling the dependencies does not differ much, we only need to download two libraries instead of one.</p>
<div class="sourceCode" id="cb129"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb129-1"><a href="the-full-monty.html#cb129-1"></a><span class="co"># create directories for JS dependencies</span></span>
<span id="cb129-2"><a href="the-full-monty.html#cb129-2"></a><span class="kw">dir.create</span>(<span class="st">&quot;./inst/htmlwidgets/three&quot;</span>, <span class="dt">recursive =</span> <span class="ot">TRUE</span>)</span>
<span id="cb129-3"><a href="the-full-monty.html#cb129-3"></a><span class="kw">dir.create</span>(<span class="st">&quot;./inst/htmlwidgets/gio&quot;</span>, <span class="dt">recursive =</span> <span class="ot">TRUE</span>)</span>
<span id="cb129-4"><a href="the-full-monty.html#cb129-4"></a></span>
<span id="cb129-5"><a href="the-full-monty.html#cb129-5"></a><span class="co"># download JS dependencies</span></span>
<span id="cb129-6"><a href="the-full-monty.html#cb129-6"></a>three &lt;-<span class="st"> </span><span class="kw">paste0</span>(</span>
<span id="cb129-7"><a href="the-full-monty.html#cb129-7"></a>  <span class="st">&quot;https://cdnjs.cloudflare.com/ajax/&quot;</span>,</span>
<span id="cb129-8"><a href="the-full-monty.html#cb129-8"></a>  <span class="st">&quot;libs/three.js/110/three.min.js&quot;</span></span>
<span id="cb129-9"><a href="the-full-monty.html#cb129-9"></a>)</span>
<span id="cb129-10"><a href="the-full-monty.html#cb129-10"></a>gio &lt;-<span class="st"> </span><span class="kw">paste0</span>(</span>
<span id="cb129-11"><a href="the-full-monty.html#cb129-11"></a>  <span class="st">&quot;https://raw.githubusercontent.com/&quot;</span>,</span>
<span id="cb129-12"><a href="the-full-monty.html#cb129-12"></a>  <span class="st">&quot;syt123450/giojs/master/build/gio.min.js&quot;</span></span>
<span id="cb129-13"><a href="the-full-monty.html#cb129-13"></a>)</span>
<span id="cb129-14"><a href="the-full-monty.html#cb129-14"></a></span>
<span id="cb129-15"><a href="the-full-monty.html#cb129-15"></a><span class="kw">download.file</span>(three, <span class="st">&quot;./inst/htmlwidgets/three/three.min.js&quot;</span>)</span>
<span id="cb129-16"><a href="the-full-monty.html#cb129-16"></a><span class="kw">download.file</span>(gio, <span class="st">&quot;./inst/htmlwidgets/gio/gio.min.js&quot;</span>)</span></code></pre></div>
<p>This should produce the following working directory.</p>
<pre><code>.
├── DESCRIPTION
├── NAMESPACE
├── R
│   └── gio.R
└── inst
    └── htmlwidgets
        ├── gio
        │   └── gio.min.js
        ├── gio.js
        ├── gio.yaml
        └── three
            └── three.min.js</code></pre>
<p>The libraries have been downloaded but the <code>gio.yml</code> file is yet to be edited. The order in which the libraries are listed matters; just as in HTML three.js needs to precede gio.js as the latter depends on the former and not vice versa.</p>
<div class="sourceCode" id="cb131"><pre class="sourceCode yml"><code class="sourceCode yaml"><span id="cb131-1"><a href="the-full-monty.html#cb131-1"></a><span class="fu">dependencies</span><span class="kw">:</span></span>
<span id="cb131-2"><a href="the-full-monty.html#cb131-2"></a><span class="at">  </span><span class="kw">-</span><span class="at"> </span><span class="fu">name</span><span class="kw">:</span><span class="at"> three</span></span>
<span id="cb131-3"><a href="the-full-monty.html#cb131-3"></a><span class="at">    </span><span class="fu">version</span><span class="kw">:</span><span class="at"> </span><span class="dv">110</span></span>
<span id="cb131-4"><a href="the-full-monty.html#cb131-4"></a><span class="at">    </span><span class="fu">src</span><span class="kw">:</span><span class="at"> htmlwidgets/three</span></span>
<span id="cb131-5"><a href="the-full-monty.html#cb131-5"></a><span class="at">    </span><span class="fu">script</span><span class="kw">:</span><span class="at"> three.min.js</span></span>
<span id="cb131-6"><a href="the-full-monty.html#cb131-6"></a><span class="at">  </span><span class="kw">-</span><span class="at"> </span><span class="fu">name</span><span class="kw">:</span><span class="at"> gio</span></span>
<span id="cb131-7"><a href="the-full-monty.html#cb131-7"></a><span class="at">    </span><span class="fu">version</span><span class="kw">:</span><span class="at"> </span><span class="fl">2.0</span></span>
<span id="cb131-8"><a href="the-full-monty.html#cb131-8"></a><span class="at">    </span><span class="fu">src</span><span class="kw">:</span><span class="at"> htmlwidgets/gio</span></span>
<span id="cb131-9"><a href="the-full-monty.html#cb131-9"></a><span class="at">    </span><span class="fu">script</span><span class="kw">:</span><span class="at"> gio.min.js</span></span></code></pre></div>
</div>
<div id="gio.js-javascript" class="section level2" number="7.2">
<h2><span class="header-section-number">7.2</span> Gio.js JavaScript</h2>
<p>Let’s copy the JavaScript code from the <a href="https://giojs.org/index.html">Get Started section of gio.js</a> in the <code>gio.js</code> file’s <code>renderValue</code> function. At this point the data format is not known so we comment the line which adds data to the visualisation.</p>
<div class="sourceCode" id="cb132"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb132-1"><a href="the-full-monty.html#cb132-1"></a><span class="co">// gio.js</span></span>
<span id="cb132-2"><a href="the-full-monty.html#cb132-2"></a>HTMLWidgets<span class="op">.</span><span class="fu">widget</span>({</span>
<span id="cb132-3"><a href="the-full-monty.html#cb132-3"></a></span>
<span id="cb132-4"><a href="the-full-monty.html#cb132-4"></a>  <span class="dt">name</span><span class="op">:</span> <span class="st">&#39;gio&#39;</span><span class="op">,</span></span>
<span id="cb132-5"><a href="the-full-monty.html#cb132-5"></a></span>
<span id="cb132-6"><a href="the-full-monty.html#cb132-6"></a>  <span class="dt">type</span><span class="op">:</span> <span class="st">&#39;output&#39;</span><span class="op">,</span></span>
<span id="cb132-7"><a href="the-full-monty.html#cb132-7"></a></span>
<span id="cb132-8"><a href="the-full-monty.html#cb132-8"></a>  <span class="dt">factory</span><span class="op">:</span> <span class="kw">function</span>(el<span class="op">,</span> width<span class="op">,</span> height) {</span>
<span id="cb132-9"><a href="the-full-monty.html#cb132-9"></a></span>
<span id="cb132-10"><a href="the-full-monty.html#cb132-10"></a>    <span class="co">// </span><span class="al">TODO</span><span class="co">: define shared variables for this instance</span></span>
<span id="cb132-11"><a href="the-full-monty.html#cb132-11"></a></span>
<span id="cb132-12"><a href="the-full-monty.html#cb132-12"></a>    <span class="cf">return</span> {</span>
<span id="cb132-13"><a href="the-full-monty.html#cb132-13"></a></span>
<span id="cb132-14"><a href="the-full-monty.html#cb132-14"></a>      <span class="dt">renderValue</span><span class="op">:</span> <span class="kw">function</span>(x) {</span>
<span id="cb132-15"><a href="the-full-monty.html#cb132-15"></a></span>
<span id="cb132-16"><a href="the-full-monty.html#cb132-16"></a>        <span class="kw">var</span> container <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(<span class="st">&quot;globe&quot;</span>)<span class="op">;</span></span>
<span id="cb132-17"><a href="the-full-monty.html#cb132-17"></a>        <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> GIO<span class="op">.</span><span class="fu">Controller</span>(container)<span class="op">;</span></span>
<span id="cb132-18"><a href="the-full-monty.html#cb132-18"></a>        <span class="co">//controller.addData(data);</span></span>
<span id="cb132-19"><a href="the-full-monty.html#cb132-19"></a>        controller<span class="op">.</span><span class="fu">init</span>()<span class="op">;</span></span>
<span id="cb132-20"><a href="the-full-monty.html#cb132-20"></a></span>
<span id="cb132-21"><a href="the-full-monty.html#cb132-21"></a>      }<span class="op">,</span></span>
<span id="cb132-22"><a href="the-full-monty.html#cb132-22"></a></span>
<span id="cb132-23"><a href="the-full-monty.html#cb132-23"></a>      <span class="dt">resize</span><span class="op">:</span> <span class="kw">function</span>(width<span class="op">,</span> height) {</span>
<span id="cb132-24"><a href="the-full-monty.html#cb132-24"></a></span>
<span id="cb132-25"><a href="the-full-monty.html#cb132-25"></a>        <span class="co">// </span><span class="al">TODO</span><span class="co">: code to re-render the widget with a new size</span></span>
<span id="cb132-26"><a href="the-full-monty.html#cb132-26"></a></span>
<span id="cb132-27"><a href="the-full-monty.html#cb132-27"></a>      }</span>
<span id="cb132-28"><a href="the-full-monty.html#cb132-28"></a></span>
<span id="cb132-29"><a href="the-full-monty.html#cb132-29"></a>    }<span class="op">;</span></span>
<span id="cb132-30"><a href="the-full-monty.html#cb132-30"></a>  }</span>
<span id="cb132-31"><a href="the-full-monty.html#cb132-31"></a>})<span class="op">;</span></span></code></pre></div>
<p>One can document and load the package but it will not work as the code above attempts to place the visualisation in a <code>div</code> with <code>id = "globe"</code>. As for the previously written widget, this needs to be changed to <code>el.id</code>.</p>
<div class="sourceCode" id="cb133"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb133-1"><a href="the-full-monty.html#cb133-1"></a><span class="co">// gio.js</span></span>
<span id="cb133-2"><a href="the-full-monty.html#cb133-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) {</span>
<span id="cb133-3"><a href="the-full-monty.html#cb133-3"></a></span>
<span id="cb133-4"><a href="the-full-monty.html#cb133-4"></a>  <span class="kw">var</span> container <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(el<span class="op">.</span><span class="at">id</span>)<span class="op">;</span></span>
<span id="cb133-5"><a href="the-full-monty.html#cb133-5"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> GIO<span class="op">.</span><span class="fu">Controller</span>(container)<span class="op">;</span></span>
<span id="cb133-6"><a href="the-full-monty.html#cb133-6"></a>  <span class="co">//controller.addData(data);</span></span>
<span id="cb133-7"><a href="the-full-monty.html#cb133-7"></a>  controller<span class="op">.</span><span class="fu">init</span>()<span class="op">;</span></span>
<span id="cb133-8"><a href="the-full-monty.html#cb133-8"></a></span>
<span id="cb133-9"><a href="the-full-monty.html#cb133-9"></a>}</span></code></pre></div>
<p>At this stage the widget should generate a visualisation.</p>
<div class="sourceCode" id="cb134"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb134-1"><a href="the-full-monty.html#cb134-1"></a>devtools<span class="op">::</span><span class="kw">document</span>()</span>
<span id="cb134-2"><a href="the-full-monty.html#cb134-2"></a>devtools<span class="op">::</span><span class="kw">load_all</span>()</span>
<span id="cb134-3"><a href="the-full-monty.html#cb134-3"></a><span class="kw">gio</span>(<span class="dt">message =</span> <span class="st">&quot;This required but not used&quot;</span>)</span></code></pre></div>
<div class="figure">
<img src="images/gio-init.png" alt="" />
<p class="caption">Output without data</p>
</div>
<p>Not too shabby given how little work was put into this! Before we move on let us optimise something. In the JavaScript code we retrieve the <code>container</code> using <code>el.id</code> but this in effect is very inefficient: <code>el</code> is identical to <code>container</code>.</p>
<div class="sourceCode" id="cb135"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb135-1"><a href="the-full-monty.html#cb135-1"></a><span class="co">// gio.js</span></span>
<span id="cb135-2"><a href="the-full-monty.html#cb135-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) {</span>
<span id="cb135-3"><a href="the-full-monty.html#cb135-3"></a></span>
<span id="cb135-4"><a href="the-full-monty.html#cb135-4"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> GIO<span class="op">.</span><span class="fu">Controller</span>(el)<span class="op">;</span></span>
<span id="cb135-5"><a href="the-full-monty.html#cb135-5"></a>  <span class="co">//controller.addData(data);</span></span>
<span id="cb135-6"><a href="the-full-monty.html#cb135-6"></a>  controller<span class="op">.</span><span class="fu">init</span>()<span class="op">;</span></span>
<span id="cb135-7"><a href="the-full-monty.html#cb135-7"></a></span>
<span id="cb135-8"><a href="the-full-monty.html#cb135-8"></a>}</span></code></pre></div>
</div>
<div id="working-with-data" class="section level2" number="7.3">
<h2><span class="header-section-number">7.3</span> Working with Data</h2>
<p>An interesting start, now onto adding data. Let’s take a look at the <a href="https://giojs.org/html/docs/dataAdd.html">documentation</a> to see what data the library expects.</p>
<div class="sourceCode" id="cb136"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb136-1"><a href="the-full-monty.html#cb136-1"></a><span class="ot">[</span></span>
<span id="cb136-2"><a href="the-full-monty.html#cb136-2"></a>  <span class="fu">{</span></span>
<span id="cb136-3"><a href="the-full-monty.html#cb136-3"></a>    <span class="dt">&quot;e&quot;</span><span class="fu">:</span> <span class="st">&quot;CN&quot;</span><span class="fu">,</span></span>
<span id="cb136-4"><a href="the-full-monty.html#cb136-4"></a>    <span class="dt">&quot;i&quot;</span><span class="fu">:</span> <span class="st">&quot;US&quot;</span><span class="fu">,</span></span>
<span id="cb136-5"><a href="the-full-monty.html#cb136-5"></a>    <span class="dt">&quot;v&quot;</span><span class="fu">:</span> <span class="dv">3300000</span></span>
<span id="cb136-6"><a href="the-full-monty.html#cb136-6"></a>  <span class="fu">}</span><span class="ot">,</span></span>
<span id="cb136-7"><a href="the-full-monty.html#cb136-7"></a>  <span class="fu">{</span></span>
<span id="cb136-8"><a href="the-full-monty.html#cb136-8"></a>    <span class="dt">&quot;e&quot;</span><span class="fu">:</span> <span class="st">&quot;CN&quot;</span><span class="fu">,</span></span>
<span id="cb136-9"><a href="the-full-monty.html#cb136-9"></a>    <span class="dt">&quot;i&quot;</span><span class="fu">:</span> <span class="st">&quot;RU&quot;</span><span class="fu">,</span></span>
<span id="cb136-10"><a href="the-full-monty.html#cb136-10"></a>    <span class="dt">&quot;v&quot;</span><span class="fu">:</span> <span class="dv">10000</span></span>
<span id="cb136-11"><a href="the-full-monty.html#cb136-11"></a>  <span class="fu">}</span></span>
<span id="cb136-12"><a href="the-full-monty.html#cb136-12"></a><span class="ot">]</span></span></code></pre></div>
<p>The JSON data should constitutes of arrays that denote arcs to draw on the globe where each arc is defined by an exporting country (<code>e</code>), an importing country (<code>i</code>), and is given a value (<code>v</code>). The importing and exporting country, the source and target of the arc, are indicated by ISO alpha-2 country codes. We can read this JSON into R.</p>
<div class="sourceCode" id="cb137"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb137-1"><a href="the-full-monty.html#cb137-1"></a><span class="co"># data.frame to test</span></span>
<span id="cb137-2"><a href="the-full-monty.html#cb137-2"></a>arcs &lt;-<span class="st"> </span>jsonlite<span class="op">::</span><span class="kw">fromJSON</span>(</span>
<span id="cb137-3"><a href="the-full-monty.html#cb137-3"></a>  <span class="st">&#39;[</span></span>
<span id="cb137-4"><a href="the-full-monty.html#cb137-4"></a><span class="st">    {</span></span>
<span id="cb137-5"><a href="the-full-monty.html#cb137-5"></a><span class="st">      &quot;e&quot;: &quot;CN&quot;,</span></span>
<span id="cb137-6"><a href="the-full-monty.html#cb137-6"></a><span class="st">      &quot;i&quot;: &quot;US&quot;,</span></span>
<span id="cb137-7"><a href="the-full-monty.html#cb137-7"></a><span class="st">      &quot;v&quot;: 3300000</span></span>
<span id="cb137-8"><a href="the-full-monty.html#cb137-8"></a><span class="st">    },</span></span>
<span id="cb137-9"><a href="the-full-monty.html#cb137-9"></a><span class="st">    {</span></span>
<span id="cb137-10"><a href="the-full-monty.html#cb137-10"></a><span class="st">      &quot;e&quot;: &quot;CN&quot;,</span></span>
<span id="cb137-11"><a href="the-full-monty.html#cb137-11"></a><span class="st">      &quot;i&quot;: &quot;RU&quot;,</span></span>
<span id="cb137-12"><a href="the-full-monty.html#cb137-12"></a><span class="st">      &quot;v&quot;: 10000</span></span>
<span id="cb137-13"><a href="the-full-monty.html#cb137-13"></a><span class="st">    }</span></span>
<span id="cb137-14"><a href="the-full-monty.html#cb137-14"></a><span class="st">  ]&#39;</span></span>
<span id="cb137-15"><a href="the-full-monty.html#cb137-15"></a>)</span>
<span id="cb137-16"><a href="the-full-monty.html#cb137-16"></a></span>
<span id="cb137-17"><a href="the-full-monty.html#cb137-17"></a><span class="kw">print</span>(arcs)</span></code></pre></div>
<pre><code>##    e  i       v
## 1 CN US 3300000
## 2 CN RU   10000</code></pre>
<p>Jsonlite automagically converts the JSON into a data frame where each row is an arc, which is great as R users tend to prefer rectangular data over lists: this is probably what the package should use as input too. Let us make some changes to the <code>gio</code> function so it takes data as input.</p>
<div class="sourceCode" id="cb139"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb139-1"><a href="the-full-monty.html#cb139-1"></a>gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</span>
<span id="cb139-2"><a href="the-full-monty.html#cb139-2"></a></span>
<span id="cb139-3"><a href="the-full-monty.html#cb139-3"></a>  <span class="co"># forward options using x</span></span>
<span id="cb139-4"><a href="the-full-monty.html#cb139-4"></a>  x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb139-5"><a href="the-full-monty.html#cb139-5"></a>    <span class="dt">data =</span> data</span>
<span id="cb139-6"><a href="the-full-monty.html#cb139-6"></a>  )</span>
<span id="cb139-7"><a href="the-full-monty.html#cb139-7"></a></span>
<span id="cb139-8"><a href="the-full-monty.html#cb139-8"></a>  <span class="co"># create widget</span></span>
<span id="cb139-9"><a href="the-full-monty.html#cb139-9"></a>  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb139-10"><a href="the-full-monty.html#cb139-10"></a>    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb139-11"><a href="the-full-monty.html#cb139-11"></a>    x,</span>
<span id="cb139-12"><a href="the-full-monty.html#cb139-12"></a>    <span class="dt">width =</span> width,</span>
<span id="cb139-13"><a href="the-full-monty.html#cb139-13"></a>    <span class="dt">height =</span> height,</span>
<span id="cb139-14"><a href="the-full-monty.html#cb139-14"></a>    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb139-15"><a href="the-full-monty.html#cb139-15"></a>    <span class="dt">elementId =</span> elementId</span>
<span id="cb139-16"><a href="the-full-monty.html#cb139-16"></a>  )</span>
<span id="cb139-17"><a href="the-full-monty.html#cb139-17"></a>}</span></code></pre></div>
<p>This must be reflected in the <code>play.js</code> file where we uncomment the line previously commented and use <code>x.data</code> passed from R.</p>
<div class="sourceCode" id="cb140"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb140-1"><a href="the-full-monty.html#cb140-1"></a><span class="co">// gio.js</span></span>
<span id="cb140-2"><a href="the-full-monty.html#cb140-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) {</span>
<span id="cb140-3"><a href="the-full-monty.html#cb140-3"></a></span>
<span id="cb140-4"><a href="the-full-monty.html#cb140-4"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> GIO<span class="op">.</span><span class="fu">Controller</span>(el)<span class="op">;</span></span>
<span id="cb140-5"><a href="the-full-monty.html#cb140-5"></a>  controller<span class="op">.</span><span class="fu">addData</span>(x<span class="op">.</span><span class="at">data</span>)<span class="op">;</span> <span class="co">// uncomment &amp; use x.data</span></span>
<span id="cb140-6"><a href="the-full-monty.html#cb140-6"></a>  controller<span class="op">.</span><span class="fu">init</span>()<span class="op">;</span></span>
<span id="cb140-7"><a href="the-full-monty.html#cb140-7"></a></span>
<span id="cb140-8"><a href="the-full-monty.html#cb140-8"></a>}</span></code></pre></div>
<p>We can now use the function with the data to plot arcs!</p>
<div class="sourceCode" id="cb141"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb141-1"><a href="the-full-monty.html#cb141-1"></a>devtools<span class="op">::</span><span class="kw">document</span>()</span>
<span id="cb141-2"><a href="the-full-monty.html#cb141-2"></a>devtools<span class="op">::</span><span class="kw">load_all</span>()</span>
<span id="cb141-3"><a href="the-full-monty.html#cb141-3"></a><span class="kw">gio</span>(arcs)</span></code></pre></div>
<p>Unfortunately, this breaks everything and we are presented with a blank screen. Using <code>console.log</code> or looking at the source code the rendered widget reveals the problem: the data isn’t actually in the correct format!</p>
<div class="sourceCode" id="cb142"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb142-1"><a href="the-full-monty.html#cb142-1"></a><span class="fu">{</span><span class="dt">&quot;x&quot;</span><span class="fu">:{</span><span class="dt">&quot;data&quot;</span><span class="fu">:{</span><span class="dt">&quot;e&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="st">&quot;CN&quot;</span><span class="ot">,</span><span class="st">&quot;CN&quot;</span><span class="ot">]</span><span class="fu">,</span><span class="dt">&quot;i&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="st">&quot;US&quot;</span><span class="ot">,</span><span class="st">&quot;RU&quot;</span><span class="ot">]</span><span class="fu">,</span><span class="dt">&quot;v&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="dv">3300000</span><span class="ot">,</span><span class="dv">10000</span><span class="ot">]</span><span class="fu">}},</span><span class="dt">&quot;evals&quot;</span><span class="fu">:</span><span class="ot">[]</span><span class="fu">,</span><span class="dt">&quot;jsHooks&quot;</span><span class="fu">:</span><span class="ot">[]</span><span class="fu">}</span></span></code></pre></div>
<p>Htmlwidgets actually serialised the data frame column-wise (long) where each array is a column, whereas gio.js expect the data to be wide (row-wise serialisation) where each array is a arc (row).</p>
<div class="sourceCode" id="cb143"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb143-1"><a href="the-full-monty.html#cb143-1"></a><span class="co"># column-wise</span></span>
<span id="cb143-2"><a href="the-full-monty.html#cb143-2"></a>jsonlite<span class="op">::</span><span class="kw">toJSON</span>(arcs, <span class="dt">dataframe =</span> <span class="st">&quot;columns&quot;</span>)</span></code></pre></div>
<pre><code>## {&quot;e&quot;:[&quot;CN&quot;,&quot;CN&quot;],&quot;i&quot;:[&quot;US&quot;,&quot;RU&quot;],&quot;v&quot;:[3300000,10000]}</code></pre>
<div class="sourceCode" id="cb145"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb145-1"><a href="the-full-monty.html#cb145-1"></a><span class="co"># row-wise</span></span>
<span id="cb145-2"><a href="the-full-monty.html#cb145-2"></a>jsonlite<span class="op">::</span><span class="kw">toJSON</span>(arcs, <span class="dt">dataframe =</span> <span class="st">&quot;rows&quot;</span>)</span></code></pre></div>
<pre><code>## [{&quot;e&quot;:&quot;CN&quot;,&quot;i&quot;:&quot;US&quot;,&quot;v&quot;:3300000},{&quot;e&quot;:&quot;CN&quot;,&quot;i&quot;:&quot;RU&quot;,&quot;v&quot;:10000}]</code></pre>
<p>As mentioned previously, convention has it that rectangular data (data frames) are serialised row-wise. This is likely to be a recurring problem.</p>
</div>
<div id="transforming-data" class="section level2" number="7.4">
<h2><span class="header-section-number">7.4</span> Transforming Data</h2>
<p>There are multiple ways to transform the data and ensure the serialised JSON is as the JavaScript library expects it to be.</p>
<div id="using-javascript" class="section level3" number="7.4.1">
<h3><span class="header-section-number">7.4.1</span> Using JavaScript</h3>
<p>JavaScript can be used to transform the data, leaving the serialiser as-is to reshape the data in the client. The HTMLwidget JavaScript library (already imported by default) exports an object which provides a method, <code>dataframeToD3</code>, to transform the data from long to wide.</p>
<div class="sourceCode" id="cb147"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb147-1"><a href="the-full-monty.html#cb147-1"></a><span class="co">// gio.js</span></span>
<span id="cb147-2"><a href="the-full-monty.html#cb147-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) {</span>
<span id="cb147-3"><a href="the-full-monty.html#cb147-3"></a></span>
<span id="cb147-4"><a href="the-full-monty.html#cb147-4"></a>  <span class="co">// long to wide</span></span>
<span id="cb147-5"><a href="the-full-monty.html#cb147-5"></a>  x<span class="op">.</span><span class="at">data</span> <span class="op">=</span> HTMLWidgets<span class="op">.</span><span class="fu">dataframeToD3</span>(x<span class="op">.</span><span class="at">data</span>)<span class="op">;</span></span>
<span id="cb147-6"><a href="the-full-monty.html#cb147-6"></a></span>
<span id="cb147-7"><a href="the-full-monty.html#cb147-7"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> GIO<span class="op">.</span><span class="fu">Controller</span>(el)<span class="op">;</span></span>
<span id="cb147-8"><a href="the-full-monty.html#cb147-8"></a>  controller<span class="op">.</span><span class="fu">addData</span>(x<span class="op">.</span><span class="at">data</span>)<span class="op">;</span> </span>
<span id="cb147-9"><a href="the-full-monty.html#cb147-9"></a>  controller<span class="op">.</span><span class="fu">init</span>()<span class="op">;</span></span>
<span id="cb147-10"><a href="the-full-monty.html#cb147-10"></a></span>
<span id="cb147-11"><a href="the-full-monty.html#cb147-11"></a>}</span></code></pre></div>
</div>
<div id="using-r" class="section level3" number="7.4.2">
<h3><span class="header-section-number">7.4.2</span> Using R</h3>
<p>Instead of serialising the data a certain way then correct in JavaScript as demonstrated previously, one can also modify, or even replace, htmlwidgets’ default serialiser. Speaking of which, below is the default serializer used by htmlwidgets.</p>
<div class="sourceCode" id="cb148"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb148-1"><a href="the-full-monty.html#cb148-1"></a><span class="cf">function</span> (x, ..., <span class="dt">dataframe =</span> <span class="st">&quot;columns&quot;</span>, <span class="dt">null =</span> <span class="st">&quot;null&quot;</span>, </span>
<span id="cb148-2"><a href="the-full-monty.html#cb148-2"></a><span class="dt">na =</span> <span class="st">&quot;null&quot;</span>, <span class="dt">auto_unbox =</span> <span class="ot">TRUE</span>, <span class="dt">use_signif =</span> <span class="ot">TRUE</span>, </span>
<span id="cb148-3"><a href="the-full-monty.html#cb148-3"></a>  <span class="dt">digits =</span> <span class="kw">getOption</span>(<span class="st">&quot;shiny.json.digits&quot;</span>, <span class="dv">16</span>), <span class="dt">force =</span> <span class="ot">TRUE</span>,</span>
<span id="cb148-4"><a href="the-full-monty.html#cb148-4"></a>  <span class="dt">POSIXt =</span> <span class="st">&quot;ISO8601&quot;</span>, <span class="dt">UTC =</span> <span class="ot">TRUE</span>, <span class="dt">rownames =</span> <span class="ot">FALSE</span>, </span>
<span id="cb148-5"><a href="the-full-monty.html#cb148-5"></a>  <span class="dt">keep_vec_names =</span> <span class="ot">TRUE</span>, <span class="dt">strict_atomic =</span> <span class="ot">TRUE</span>) </span>
<span id="cb148-6"><a href="the-full-monty.html#cb148-6"></a>{</span>
<span id="cb148-7"><a href="the-full-monty.html#cb148-7"></a>  <span class="cf">if</span> (strict_atomic) </span>
<span id="cb148-8"><a href="the-full-monty.html#cb148-8"></a>      x &lt;-<span class="st"> </span><span class="kw">I</span>(x)</span>
<span id="cb148-9"><a href="the-full-monty.html#cb148-9"></a>  jsonlite<span class="op">::</span><span class="kw">toJSON</span>(x, <span class="dt">dataframe =</span> dataframe, <span class="dt">null =</span> null, <span class="dt">na =</span> na, </span>
<span id="cb148-10"><a href="the-full-monty.html#cb148-10"></a>    <span class="dt">auto_unbox =</span> auto_unbox, <span class="dt">digits =</span> digits, <span class="dt">force =</span> force, </span>
<span id="cb148-11"><a href="the-full-monty.html#cb148-11"></a>    <span class="dt">use_signif =</span> use_signif, <span class="dt">POSIXt =</span> POSIXt, <span class="dt">UTC =</span> UTC, </span>
<span id="cb148-12"><a href="the-full-monty.html#cb148-12"></a>    <span class="dt">rownames =</span> rownames, <span class="dt">keep_vec_names =</span> keep_vec_names, </span>
<span id="cb148-13"><a href="the-full-monty.html#cb148-13"></a>    <span class="dt">json_verbatim =</span> <span class="ot">TRUE</span>, ...)</span>
<span id="cb148-14"><a href="the-full-monty.html#cb148-14"></a>}</span></code></pre></div>
<p>The problem at hand is caused by the <code>dataframe</code> argument which is set to <code>columns</code> where it should be set <code>rows</code> (for row-wise). Arguments are passed to the serialiser indirectly, in the form of a list set as <code>TOJSON_ARGS</code> attribute to the object <code>x</code> that is serialised. We could thus change the <code>gio</code> function to reflect the aforementioned change.</p>
<div class="sourceCode" id="cb149"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb149-1"><a href="the-full-monty.html#cb149-1"></a>gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, </span>
<span id="cb149-2"><a href="the-full-monty.html#cb149-2"></a>  <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</span>
<span id="cb149-3"><a href="the-full-monty.html#cb149-3"></a></span>
<span id="cb149-4"><a href="the-full-monty.html#cb149-4"></a>  <span class="co"># forward options using x</span></span>
<span id="cb149-5"><a href="the-full-monty.html#cb149-5"></a>  x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb149-6"><a href="the-full-monty.html#cb149-6"></a>    <span class="dt">data =</span> data</span>
<span id="cb149-7"><a href="the-full-monty.html#cb149-7"></a>  )</span>
<span id="cb149-8"><a href="the-full-monty.html#cb149-8"></a></span>
<span id="cb149-9"><a href="the-full-monty.html#cb149-9"></a>  <span class="co"># serialise data.frames to wide (not long as default)</span></span>
<span id="cb149-10"><a href="the-full-monty.html#cb149-10"></a>  <span class="kw">attr</span>(x, <span class="st">&#39;TOJSON_ARGS&#39;</span>) &lt;-<span class="st"> </span><span class="kw">list</span>(<span class="dt">dataframe =</span> <span class="st">&quot;rows&quot;</span>)</span>
<span id="cb149-11"><a href="the-full-monty.html#cb149-11"></a></span>
<span id="cb149-12"><a href="the-full-monty.html#cb149-12"></a>  <span class="co"># create widget</span></span>
<span id="cb149-13"><a href="the-full-monty.html#cb149-13"></a>  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb149-14"><a href="the-full-monty.html#cb149-14"></a>    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb149-15"><a href="the-full-monty.html#cb149-15"></a>    x,</span>
<span id="cb149-16"><a href="the-full-monty.html#cb149-16"></a>    <span class="dt">width =</span> width,</span>
<span id="cb149-17"><a href="the-full-monty.html#cb149-17"></a>    <span class="dt">height =</span> height,</span>
<span id="cb149-18"><a href="the-full-monty.html#cb149-18"></a>    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb149-19"><a href="the-full-monty.html#cb149-19"></a>    <span class="dt">elementId =</span> elementId</span>
<span id="cb149-20"><a href="the-full-monty.html#cb149-20"></a>  )</span>
<span id="cb149-21"><a href="the-full-monty.html#cb149-21"></a>}</span></code></pre></div>
<p>The above may appear confusing at first as one rarely encounters the <code>attr</code> replacement function.</p>
<div class="sourceCode" id="cb150"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb150-1"><a href="the-full-monty.html#cb150-1"></a><span class="kw">attr</span>(cars, <span class="st">&quot;hello&quot;</span>) &lt;-<span class="st"> &quot;world&quot;</span> <span class="co"># set </span></span>
<span id="cb150-2"><a href="the-full-monty.html#cb150-2"></a><span class="kw">attr</span>(cars, <span class="st">&quot;hello&quot;</span>) <span class="co"># get </span></span></code></pre></div>
<pre><code>## [1] &quot;world&quot;</code></pre>
<p>Otherwise the serializer can also be replaced in its entirety, also by setting an attribute, <code>TOJSON_FUNC</code>, to the <code>x</code> object. Below the serialiser is changed to jsonify <span class="citation">(Cooley <a href="#ref-R-jsonify" role="doc-biblioref">2020</a>)</span> which by default serialises data frames to wide, unlike htmlwidgets’ serialiser, thereby also fixing the issue.</p>
<div class="sourceCode" id="cb152"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb152-1"><a href="the-full-monty.html#cb152-1"></a>gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, </span>
<span id="cb152-2"><a href="the-full-monty.html#cb152-2"></a>  <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</span>
<span id="cb152-3"><a href="the-full-monty.html#cb152-3"></a></span>
<span id="cb152-4"><a href="the-full-monty.html#cb152-4"></a>  <span class="co"># forward options using x</span></span>
<span id="cb152-5"><a href="the-full-monty.html#cb152-5"></a>  x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb152-6"><a href="the-full-monty.html#cb152-6"></a>    <span class="dt">data =</span> data</span>
<span id="cb152-7"><a href="the-full-monty.html#cb152-7"></a>  )</span>
<span id="cb152-8"><a href="the-full-monty.html#cb152-8"></a></span>
<span id="cb152-9"><a href="the-full-monty.html#cb152-9"></a>  <span class="co"># replace serialiser</span></span>
<span id="cb152-10"><a href="the-full-monty.html#cb152-10"></a>  <span class="kw">attr</span>(x, <span class="st">&#39;TOJSON_FUNC&#39;</span>) &lt;-<span class="st"> </span>gio_serialiser</span>
<span id="cb152-11"><a href="the-full-monty.html#cb152-11"></a></span>
<span id="cb152-12"><a href="the-full-monty.html#cb152-12"></a>  <span class="co"># create widget</span></span>
<span id="cb152-13"><a href="the-full-monty.html#cb152-13"></a>  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb152-14"><a href="the-full-monty.html#cb152-14"></a>    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb152-15"><a href="the-full-monty.html#cb152-15"></a>    x,</span>
<span id="cb152-16"><a href="the-full-monty.html#cb152-16"></a>    <span class="dt">width =</span> width,</span>
<span id="cb152-17"><a href="the-full-monty.html#cb152-17"></a>    <span class="dt">height =</span> height,</span>
<span id="cb152-18"><a href="the-full-monty.html#cb152-18"></a>    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb152-19"><a href="the-full-monty.html#cb152-19"></a>    <span class="dt">elementId =</span> elementId</span>
<span id="cb152-20"><a href="the-full-monty.html#cb152-20"></a>  )</span>
<span id="cb152-21"><a href="the-full-monty.html#cb152-21"></a>}</span>
<span id="cb152-22"><a href="the-full-monty.html#cb152-22"></a></span>
<span id="cb152-23"><a href="the-full-monty.html#cb152-23"></a><span class="co"># serialiser</span></span>
<span id="cb152-24"><a href="the-full-monty.html#cb152-24"></a>gio_serialiser &lt;-<span class="st"> </span><span class="cf">function</span>(x){</span>
<span id="cb152-25"><a href="the-full-monty.html#cb152-25"></a>  jsonify<span class="op">::</span><span class="kw">to_json</span>(x, <span class="dt">unbox =</span> <span class="ot">TRUE</span>)</span>
<span id="cb152-26"><a href="the-full-monty.html#cb152-26"></a>}</span></code></pre></div>
<p>Alternatively, one can also leave all serialisers unchanged and instead format the data in R prior to the serialisation, changing the dataframe to a row-wise list.</p>
<div class="sourceCode" id="cb153"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb153-1"><a href="the-full-monty.html#cb153-1"></a>x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb153-2"><a href="the-full-monty.html#cb153-2"></a>  <span class="dt">data =</span> <span class="kw">apply</span>(data, <span class="dv">1</span>, as.list)</span>
<span id="cb153-3"><a href="the-full-monty.html#cb153-3"></a>)</span></code></pre></div>
</div>
<div id="pros-cons" class="section level3" number="7.4.3">
<h3><span class="header-section-number">7.4.3</span> Pros &amp; Cons</h3>
<p>There are pros and cons to each methods. The preferable method is probably to only alter the argument(s) where needed, this is the method used in the remainder of the book. Replacing the serialiser in its entirety should not be necessary, only do this once you are very familiar with serialisation and truly see a need for it. Moreover htmlwidgets’ serialiser extends jsonlite to allow converting JavaScript code which will come in handy later on. Transforming the data in JavaScript has one drawback, <code>HTMLWidgets.dataframeToD3</code> cannot be applied to the entire <code>x</code> object, it will only work on the subsets that hold the column-wise data (<code>x.data</code>) which tends to lead to clunky code as one uses said function in various places.</p>
<div class="figure">
<img src="images/gio-data.png" alt="" />
<p class="caption">Gio output with correct serialisation</p>
</div>
</div>
</div>
<div id="on-print-method" class="section level2" number="7.5">
<h2><span class="header-section-number">7.5</span> On Print Method</h2>
<p>Let’s add the option to style the globe, gio.js provides mutliple <a href="https://giojs.org/html/docs/colorStyle.html">themes</a> but they are currently not applicable from R. As a matter of fact, gio.js provides dozens of customisation options that should be available in the package as well. These, however, probably should be split across different functions, just like they are in gio.js, rather than all be accessible from a single function containing hundreds of arguments. This begs the question, when would one use another function given the function <code>gio</code> generates the visualisation? As it happens <code>gio</code> itself (or rather the function <code>htmlwidgets::createWidget</code> it contains) does not render the output, it returns an object of class “htmlwidget” which actually renders the visualisation on print (literally <code>htmlwidget.print</code> method).</p>
<div class="sourceCode" id="cb154"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb154-1"><a href="the-full-monty.html#cb154-1"></a>g &lt;-<span class="st"> </span><span class="kw">gio</span>(arcs) <span class="co"># nothing renders</span></span>
<span id="cb154-2"><a href="the-full-monty.html#cb154-2"></a>g <span class="co"># visualisation renders</span></span></code></pre></div>
<p>Therefore, one can use functions on the object returned by <code>gio</code> which contains, amongst other things, the <code>x</code> list to which we can make changes, append data, or do any other operation that standard R lists allow.</p>
<div class="sourceCode" id="cb155"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb155-1"><a href="the-full-monty.html#cb155-1"></a><span class="kw">print</span>(g<span class="op">$</span>x)</span>
<span id="cb155-2"><a href="the-full-monty.html#cb155-2"></a></span>
<span id="cb155-3"><a href="the-full-monty.html#cb155-3"></a><span class="co">## $data</span></span>
<span id="cb155-4"><a href="the-full-monty.html#cb155-4"></a><span class="co">##    e  i       v</span></span>
<span id="cb155-5"><a href="the-full-monty.html#cb155-5"></a><span class="co">## 1 CN US 3300000</span></span>
<span id="cb155-6"><a href="the-full-monty.html#cb155-6"></a><span class="co">## 2 CN RU   10000</span></span>
<span id="cb155-7"><a href="the-full-monty.html#cb155-7"></a><span class="co">## </span></span>
<span id="cb155-8"><a href="the-full-monty.html#cb155-8"></a><span class="co">## attr(,&quot;TOJSON_ARGS&quot;)</span></span>
<span id="cb155-9"><a href="the-full-monty.html#cb155-9"></a><span class="co">## attr(,&quot;TOJSON_ARGS&quot;)$dataframe</span></span>
<span id="cb155-10"><a href="the-full-monty.html#cb155-10"></a><span class="co">## [1] &quot;rows&quot;</span></span></code></pre></div>
<p>This clarified the function to change the style of the visualisation can be added to the package. It would take as input the output of <code>gio</code> and append the style (name of theme) to the <code>x</code> list, this would then be used in JavaScript to change the look of the visualisation.</p>
<div class="sourceCode" id="cb156"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb156-1"><a href="the-full-monty.html#cb156-1"></a><span class="co">#&#39; @export</span></span>
<span id="cb156-2"><a href="the-full-monty.html#cb156-2"></a>gio_style &lt;-<span class="st"> </span><span class="cf">function</span>(g, <span class="dt">style =</span> <span class="st">&quot;magic&quot;</span>){</span>
<span id="cb156-3"><a href="the-full-monty.html#cb156-3"></a>  g<span class="op">$</span>x<span class="op">$</span>style &lt;-<span class="st"> </span>style</span>
<span id="cb156-4"><a href="the-full-monty.html#cb156-4"></a>  <span class="kw">return</span>(g)</span>
<span id="cb156-5"><a href="the-full-monty.html#cb156-5"></a>}</span></code></pre></div>
<p>The style is applied using the <code>setStyle</code> method on the controller before the visualisation is created, before the <code>init</code> method is called, using the style passed from R: <code>x.style</code>.</p>
<div class="sourceCode" id="cb157"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb157-1"><a href="the-full-monty.html#cb157-1"></a><span class="co">// gio.js</span></span>
<span id="cb157-2"><a href="the-full-monty.html#cb157-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) {</span>
<span id="cb157-3"><a href="the-full-monty.html#cb157-3"></a></span>
<span id="cb157-4"><a href="the-full-monty.html#cb157-4"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> GIO<span class="op">.</span><span class="fu">Controller</span>(el)<span class="op">;</span></span>
<span id="cb157-5"><a href="the-full-monty.html#cb157-5"></a>  controller<span class="op">.</span><span class="fu">addData</span>(x<span class="op">.</span><span class="at">data</span>)<span class="op">;</span> </span>
<span id="cb157-6"><a href="the-full-monty.html#cb157-6"></a></span>
<span id="cb157-7"><a href="the-full-monty.html#cb157-7"></a>  controller<span class="op">.</span><span class="fu">setStyle</span>(x<span class="op">.</span><span class="at">style</span>)<span class="op">;</span> <span class="co">// set style</span></span>
<span id="cb157-8"><a href="the-full-monty.html#cb157-8"></a></span>
<span id="cb157-9"><a href="the-full-monty.html#cb157-9"></a>  controller<span class="op">.</span><span class="fu">init</span>()<span class="op">;</span></span>
<span id="cb157-10"><a href="the-full-monty.html#cb157-10"></a></span>
<span id="cb157-11"><a href="the-full-monty.html#cb157-11"></a>}</span></code></pre></div>
<p>We can now run <code>devtools::load_all</code> to export the newly written function and load the functions in the environment with <code>devtools::load_all</code>.</p>
<div class="sourceCode" id="cb158"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb158-1"><a href="the-full-monty.html#cb158-1"></a>g1 &lt;-<span class="st"> </span><span class="kw">gio</span>(arcs)</span>
<span id="cb158-2"><a href="the-full-monty.html#cb158-2"></a>g2 &lt;-<span class="st"> </span><span class="kw">gio_style</span>(g1, <span class="st">&quot;juicyCake&quot;</span>)</span>
<span id="cb158-3"><a href="the-full-monty.html#cb158-3"></a></span>
<span id="cb158-4"><a href="the-full-monty.html#cb158-4"></a>g2</span></code></pre></div>
<div class="figure">
<img src="images/gio-style.png" alt="" />
<p class="caption">Gio with a new style</p>
</div>
<p>This is great but can be greatly improved upon with the magrittr pipe <span class="citation">(Bache and Wickham <a href="#ref-R-magrittr" role="doc-biblioref">2020</a>)</span>, it would allow easily passing the output of each function to the next to obtain an API akin to that of plotly or highcharter.</p>
<div class="sourceCode" id="cb159"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb159-1"><a href="the-full-monty.html#cb159-1"></a><span class="kw">library</span>(magrittr)</span>
<span id="cb159-2"><a href="the-full-monty.html#cb159-2"></a></span>
<span id="cb159-3"><a href="the-full-monty.html#cb159-3"></a><span class="kw">gio</span>(arcs) <span class="op">%&gt;%</span><span class="st"> </span></span>
<span id="cb159-4"><a href="the-full-monty.html#cb159-4"></a><span class="st">  </span><span class="kw">gio_style</span>(<span class="st">&quot;juicyCake&quot;</span>)</span></code></pre></div>
<p>The pipe drastically improves the API that gio provides its users and thus probably should be exported by the package; the usethis package provides a function to easily do so.</p>
<div class="sourceCode" id="cb160"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb160-1"><a href="the-full-monty.html#cb160-1"></a><span class="co"># export the pipe</span></span>
<span id="cb160-2"><a href="the-full-monty.html#cb160-2"></a>usethis<span class="op">::</span><span class="kw">use_pipe</span>()</span></code></pre></div>
<p>This closes this chapter but is not the last we see of gio.js, we shall use it as example in the next chapters as we extend its functionalities, polish certain aspects such as sizing and security.</p>

</div>
</div>
<h3>References</h3>
<div id="refs" class="references">
<div id="ref-R-magrittr">
<p>Bache, Stefan Milton, and Hadley Wickham. 2020. <em>Magrittr: A Forward-Pipe Operator for R</em>.</p>
</div>
<div id="ref-R-jsonify">
<p>Cooley, David. 2020. <em>Jsonify: Convert Between ’R’ Objects and Javascript Object Notation (Json)</em>. <a href="https://CRAN.R-project.org/package=jsonify">https://CRAN.R-project.org/package=jsonify</a>.</p>
</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="a-realistic-widget.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="advanced-topics.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook/js/app.min.js"></script>
<script src="libs/gitbook/js/lunr.js"></script>
<script src="libs/gitbook/js/clipboard.min.js"></script>
<script src="libs/gitbook/js/plugin-search.js"></script>
<script src="libs/gitbook/js/plugin-sharing.js"></script>
<script src="libs/gitbook/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook/js/plugin-bookdown.js"></script>
<script src="libs/gitbook/js/jquery.highlight.js"></script>
<script src="libs/gitbook/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/javascript-for-r/edit/master/3-24-htmlwidgets-gio.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
